<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html{
            font-size: 1rem;
        }
        #app16{
            height: 30rem;width: 30rem;background: pink;
        }
        p{
            width: 10rem;height: 10rem;background: blue;font-size: 2rem;color: red;
        }
        .slide-fade-enter-active {
            transition: all .3s ease;
        }
        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-active {
            padding-left: 10px;
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app16" >
    <button v-on:click="show =!show">按钮</button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>

</body>
<script>
    var app16=new Vue({
        el: '#app16',
        data:{
            show:true
        }
    })


</script>
</html>
